<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">

            //1、页面加载完成后，激活onload事件
            window.onload = function () {

                //2、根据img元素的id，获取img元素对象
                var imgObj = document.getElementById("idImg");


                //定义变量： 图片的名字
                let imgName = 2;

                //改进方案： 数组 （提前存储好要切换的图片名）

                //3、开启定时器： 每间隔2000毫秒，就执行一次函数
                setInterval(function () {

                        //4、修改img标签的src属性的值
                        imgObj.src = "img/" + imgName + ".jpg";

                        if (imgName > 3) {
                            imgName = 1;
                        } else {
                            imgName++;
                        }
                    },
                    2000);
            }


        </script>


    </head>

    <body>
        <!--width="100%"表示自适应父容器body的大小，这里就是整个页面-->
        <!--由于页面上此时还会有边框，所以这里直接将边框去掉就可以，拿掉 border="1"-->
        <table cellspacing="0" width="100%" cellpadding="0">
            <tr>
                <td>
                    <!--topbar : 1行3列表格-->
                    <table width="100%">
                        <tr>
                            <!--这里的&nbsp;&nbsp;为了能够让
                                黑马程序员的图片向右靠一些
                            -->
                            <td>&nbsp;&nbsp;<img src="img/logo2.png"/></td>
                            <td><img src="img/header.jpg"/></td>
                            <td align="center">
                                <!--这里的&nbsp;为了能够让登录、注册和购物车之间的距离大一点-->
                                <a href="javascript:;">登录</a>&nbsp;
                                <a href="javascript:;">注册</a>&nbsp;
                                <a href="javascript:;">购物车</a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <!--导航条：1行2列表格-->
                    <!--
                        width="100%" 表示适应父标签大小
                        bgcolor="black" 表示表格背景颜色是黑色
                        height 表示表格高度是50
                    -->
                    <table width="100%" bgcolor="black" height="50">
                        <tr>
                            <td>
                                <!--
                                    &nbsp;&nbsp; 表示首页字体向右靠靠
                                -->
                                &nbsp;&nbsp;
                                <a href="javascript:;">
                                    <font color="white" size="5">首页</font>
                                </a>&nbsp;
                                <!--&nbsp; 在这里表示
                                    首页  手机数码  电脑办公  电脑办公  电脑办公  电脑办公距离大一些
                                -->
                                <a href="javascript:;">
                                    <font color="white">手机数码</font>
                                </a>&nbsp;
                                <a href="javascript:;">
                                    <font color="white">电脑办公</font>
                                </a>&nbsp;
                                <a href="javascript:;">
                                    <font color="white">电脑办公</font>
                                </a>&nbsp;
                                <a href="javascript:;">
                                    <font color="white">电脑办公</font>
                                </a>
                            </td>
                            <!--
                                align="right" 表示输入的文本框和提交按钮在表格最右面
                            -->
                            <td align="right">
                                <!--placeholder 属性表示文本框中默认显示的内容-->
                                <!--
                                    <input type="text"/> 表示输入文本框
                                    <input type="button"/> 表示按钮
                                -->
                                <input type="text" placeholder="Search"/>
                                <input type="button" value="Submit"/>&nbsp;&nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <!--轮播图：一张图片-->
                    <!--轮播图暂时不书写，这里只写一张图片-->
                    <img src="img/1.jpg" width="100%" id="idImg"/>
                </td>
            </tr>
            <tr>
                <td>
                    <!--热门商品：3行7列表格-->
                    <table width="100%">
                        <tr>
                            <td colspan="7">
                                <!--
                                注意：在html中有种标签叫做块级标签，只能自己独立占一行。
                                这样的标签有：标题标签hn、段落标签p、列表标签ul等
                                但是我们这里需要让热门商品的字和图片在一行，我们可以将
                                图片放到h3标题中
                                -->
                                <h3>热门商品&nbsp;<img src="img/title2.jpg"/></h3>
                            </td>
                            <!--<td colspan="6">
                                &nbsp;<img src="img/title2.jpg"/>
                            </td>-->
                        </tr>
                        <!--
                             align="center" 为了让这一行所有列都居中
                        -->
                        <tr align="center">
                            <!--
                                rowspan="2" 为了让这一列跨2行
                            -->
                            <td rowspan="2">
                                <img src="img/big01.jpg" width="205" height="404"/>
                            </td>
                            <!--
                                colspan="3" 为了让这一列跨3列
                            -->
                            <td colspan="3">
                                <img src="img/middle01.jpg"/>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                        </tr>
                        <tr align="center">
                            <!--<td></td>-->
                            <!--由于上一行的第一列跨2行，所以这一行的第一列去掉-->
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <!--广告：一张图片-->
                    <img src="img/ad.jpg" width="100%"/>
                </td>
            </tr>
            <tr>
                <td>
                    <!--热门商品：3行7列表格-->
                    <table width="100%">
                        <tr>
                            <td colspan="7">
                                <!--
                                注意：在html中有种标签叫做块级标签，只能自己独立占一行。
                                这样的标签有：标题标签hn、段落标签p、列表标签ul等
                                但是我们这里需要让热门商品的字和图片在一行，我们可以将
                                图片放到h3标题中
                                -->
                                <h3>热门商品&nbsp;<img src="img/title2.jpg"/></h3>
                            </td>
                            <!--<td colspan="6">
                                &nbsp;<img src="img/title2.jpg"/>
                            </td>-->
                        </tr>
                        <!--
                             align="center" 为了让这一行所有列都居中
                        -->
                        <tr align="center">
                            <!--
                                rowspan="2" 为了让这一列跨2行
                            -->
                            <td rowspan="2">
                                <img src="img/big01.jpg" width="205" height="404"/>
                            </td>
                            <!--
                                colspan="3" 为了让这一列跨3列
                            -->
                            <td colspan="3">
                                <img src="img/middle01.jpg"/>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                        </tr>
                        <tr align="center">
                            <!--<td></td>-->
                            <!--由于上一行的第一列跨2行，所以这一行的第一列去掉-->
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                            <td>
                                &nbsp;&nbsp;<img src="img/small03.jpg"/><br/>
                                <a href="javascript:;">
                                    <font color="black">冬瓜</font>
                                </a><br/>
                                <font color="red">¥299.00</font>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <!--footer:2行1列表格-->
                    <table width="100%">
                        <tr>
                            <td>
                                <img src="img/footer.jpg" width="100%"/>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <a href="javascript:;">关于我们 </a>
                                <a href="javascript:;">联系我们 </a>
                                <a href="javascript:;">招贤纳士 </a>
                                <a href="javascript:;">法律声明</a>
                                <a href="javascript:;">友情链接 </a>
                                <a href="javascript:;">支付方式 </a>
                                <a href="javascript:;">配送方式 </a>
                                <a href="javascript:;">服务声明 </a>
                                <a href="javascript:;"> 广告声明 </a>
                                <!--
                                    这里使用段落标签是因为我们观看页面发现上面和下面之间有间隙
                                -->
                                <p>Copyright &copy; 2005-2016 传智商城 版权所有</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>